<template>
  <div class="wrapper wrapper-content animated fadeInRight v-cloak" v-cloak>
    <div class="row">
      <div class="col-md-12">
        <div class="clients-list">
          <ul class="nav nav-tabs">
            <li class="active"></li>
          </ul>
          <div class="tab-content">
            <div class="tab-pane active">
              <div class="ibox float-e-margins">
                <div class="ibox-content">
                  <table class="table">
                    <tr>
                      <td>
                        <form id="info_search_form" role="form" class="form-inline" method="post" accept-charset="UTF-8"
                              @submit.prevent="page(1)">
                          <div class="form-group">
                            <label class="font-noraml">统计时间时间</label>
                            <div class="input-daterange input-group">
                              <input type="hidden" name="areaIds" v-model="areaIds"/>
                              <input autocomplete="off" id="dateBegin" type="text" :value="dateBegin"
                                     placeholder="点击输入起始时间" class="input-sm form-control"
                                     name="dateBegin"/>
                              <span class="input-group-addon">到</span>
                              <input autocomplete="off" id="dateEnd" type="text" :value="dateEnd"
                                     placeholder="点击输入截止时间" class="input-sm form-control"
                                     name="dateEnd"/>
                            </div>
                          </div>
                          <div class="form-group">
                            <input type="text" name="keyword" placeholder="请输入关键词" class="input-sm form-control">
                          </div>
                          <div class="form-group">
                            <button type="submit" class="btn btn-sm btn-primary">搜索</button>
                            <button type="reset" class="btn btn-sm btn-dafault">重置</button>
                          </div>
                        </form>
                      </td>
                    </tr>
                  </table>
                  <div class="table-responsive table-scrollable">
                    <table class="table table-bordered table-striped  table-hover">
                      <thead>
                      <tr>
                        <th style="width:20px;">#</th>
                        <th>统计时间</th>
                        <th>河道名称</th>
                        <th>行政区划</th>
                        <th>全部日志</th>
                        <th>正常日志</th>
                        <th>异常日志</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-if="result.data.data && result.data.data.length>0"
                          v-for="(item, index) in result.data.data">
                        <td>{{(result.data.pageIndex-1)*result.data.pageSize + index+1}}</td>
                        <td>{{dateBegin}}~{{dateEnd}}</td>
                        <td>{{item.riverName}}</td>
                        <td>{{item.areaNames}}</td>
                        <td>{{item.total}}</td>
                        <td>{{item.normal}}</td>
                        <td>{{item.total - item.normal}}</td>
                      </tr>
                      <tr v-if="result.data.data==null || result.data.data.length==0">
                        <td colspan="7">
                          <div class="alert"><strong>{{ result | message }}</strong></div>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                    <div class="b_page" v-html="tagPages"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import '@/assets/css/style.css'

  import $ from '@/assets/js/jquery-vendor.js'
  import 'jquery.cookie'
  import axios from 'axios'
  import '@/assets/js/datepicker-vendor.js'

  import 'layui-laydate/dist/theme/default/laydate.css'
  import laydate from 'layui-laydate'
  import {$storage, axiosContentType, site} from '@/assets/js/boss'
  import '@/assets/js/pageTag'

  export default {
    data() {
      return {
        result: {data: {pageIndex: 1, data: []}, message: ''},
        tagPages: '',
        areaIds: JSON.parse($storage.getItem('staff')).areaId ? JSON.parse($storage.getItem('staff')).areaId : '',
        dateBegin: getRecentDay(-30),
        dateEnd: getRecentDay(0)
      }
    },
    mounted() {
      let that = window.$vueApp = this;
      laydate.render({
        elem: '#dateBegin',
        event: 'click',
        type: 'date',
        format: 'yyyy-MM-dd',
        done: function (val) {
          that.dateBegin = val;
        }
      });
      laydate.render({
        elem: '#dateEnd',
        event: 'click',
        type: 'date',
        format: 'yyyy-MM-dd',
        isInitValue: true,
        done: function (val) {
          that.dateEnd = val;
        }
      });
      document.getElementsByTagName('body')[0].className = 'fixed-sidebar full-height-layout';
      this.staff.init(function () {
        that.page(1);
      });
    },
    watch: {
      // result: function (val) {
      //   this.$nextTick(function () { console.info('变量result渲染完成'); }
      // }
    },
    methods: {
      page(pageIndex) {
        let that = window.$vueApp = this;
        if (!pageIndex) pageIndex = 1;
        axios.post(site.completionStat.page + pageIndex
          , $('#info_search_form').serialize()
          , axiosContentType.xWwwFormUrlencoded
        ).then(function (response) {
          const result = response.data;
          if (result.code === 0) {
            that.result = result;
            that.tagPages = that.tag.page(result.data);
          } else {
            alert(result.message);
          }
        });
      },
      info(title, item) {
        $storage.setItem(site.inspectionPlan.info, item.id);
        this.lbox.openMyBoxLayer(title, site.inspectionPlan.view + '/info');
      },
      edit(title, item) {
        $storage.setItem(site.inspectionPlan.info, item.id);
        this.lbox.openMyBoxLayer(title, site.inspectionPlan.view + '/edit');
      },
      del(item) {
        let that = window.$vueApp = this;
        if (confirm('确认删除吗?')) {
          axios.post(site.inspectionPlan.del + item.id, {}).then(function (response) {
            const result = response.data;
            if (result.code === 0) {
              that.page(that.result.data.pageIndex);
              alert('删除成功');
            } else {
              alert(result.message);
            }
          });
        }
      }
    }
  }
  /* 获取近N天 */
  function getRecentDay(day) {
    let today = new Date();
    let targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
    today.setTime(targetday_milliseconds);
    let tYear = today.getFullYear();
    let tMonth = today.getMonth();
    let tDate = today.getDate();
    tMonth = doHandleMonth(tMonth + 1);
    tDate = doHandleMonth(tDate);
    return tYear + '-' + tMonth + '-' + tDate;
  }
  function doHandleMonth(month) {
    let m = month;
    if (month.toString().length === 1) {
      m = '0' + month;
    }
    return m;
  }
</script>
